<template>
  <el-button @click="preview">点击JSON报表预览</el-button>
  <div style="height: 100%" id="reportPreviewJson"></div>

</template>
<script setup>


const reportDesignerId = "xzReportDesignerTabs1"
import {usePreviewStore} from "@/stores/modules/xzPreviewStore";
import {onMounted} from "vue";
let data_init = [{
  type:1 ,    // 1 json 数据    3 api服务
  name: "商品销售",
  "response_data": [
    {
      "商品名称": "笔记本电脑",
      "区域名称": "北京",
      "销售额": 8000
    },
    {
      "商品名称": "笔记本电脑",
      "区域名称": "上海",
      "销售额": 8800
    },
    {
      "商品名称": "笔记本电脑",
      "区域名称": "深圳",
      "销售额": 8100
    },
    {
      "商品名称": "台式电脑",
      "区域名称": "北京",
      "销售额": 5600
    },
    {
      "商品名称": "台式电脑",
      "区域名称": "上海",
      "销售额": 6100
    },
    {
      "商品名称": "台式电脑",
      "区域名称": "深圳",
      "销售额": 5300
    }
  ]
}];//初始数据；假定报表设计器是根据这个这个初始数据的表结构设计的，回显可以用这个数据；否则。。。。

const usePreStore = usePreviewStore();

const option = {
  mode: 'read',  //  报表模式  read | edit  只读模式|编辑模式

  view: {
    width: () => document.documentElement.clientWidth,
    height: () => document.documentElement.clientHeight
  },   // 设置报表的宽高
  renderArrow: false,  // 是否显式 扩展方向图标
  showFreeze: false,  // 是否显式冻结线
  showGrid: false   // 是否显式网格线
};
let spreadSheet;

onMounted(()=>{
  spreadSheet = XZReport("#reportPreviewJson", option)

})
const preview = () => {
  if (usePreStore.xzReportDesigners.size > 0 && usePreStore.xzReportDesigners.has(reportDesignerId)) {
    let {config,data} = usePreStore.xzReportDesigners.get(reportDesignerId)
    if(data.length>0){
      console.log("报表设计器实例sheetDesign.getData()，居然有数据，估计是json数据源，忽略一下这里的data，是否有可以回显，经过确认，没有数据无法回显：",data);
      spreadSheet.update(config,data);
    }else {
      console.log("json数据集，整个记录都会保存在报表实例中？确认后，和其他数据集一样，也只是保留了报表实例，必须提供才可以回显:");
      spreadSheet.update(config);
    }

    //spreadSheet = XZReport("#reportPreview", option, config, data);
  }
}

</script>

<style scoped>

</style>
